<template>
  <el-dialog
    :title="state.title"
    @close="handleClose"
    width="600"
    v-model="state.visible"
    :before-close="beforeClose"
    :loading="state.loading"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-form label-width="120px" :model="form" :rules="rules" ref="formRef">
      <el-row>
        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.store.stationId')" prop="stationId">
            <el-select style="width: 100%" v-model="form.stationId" :placeholder="t('system.chargerStorage.store.placeholder.stationId')">
              <el-option v-for="item in stationOptions" :key="item.id" :label="item.name[appStore.appLanguage]" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.store.priceId')" prop="priceId">
            <el-select style="width: 100%" v-model="form.priceId" :placeholder="t('system.chargerStorage.store.placeholder.priceId')">
              <el-option v-for="item in priceOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.store.status')" prop="status">
            <el-radio-group style="width: 100%" v-model="form.status" :placeholder="t('system.chargerStorage.store.placeholder.status')">
              <el-radio :label="item.value" :value="item.value" :key="index" v-for="(item, index) in EnableStatusEnum">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="22">
          <el-form-item :label="t('system.chargerStorage.store.note')" prop="note">
            <el-input type="textarea" row="4" v-model="form.note" :placeholder="t('system.chargerStorage.store.placeholder.note')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="handleClose" :loading="state.loading">{{ t('crud.cancelText') }}</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="state.loading">{{t('crud.confirmText')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>


import {FormInstance, FormRules} from 'element-plus'


import {useI18n} from 'vue-i18n'
import {optionSelect as priceOptionSelect} from '@/api/business/priceCharge'
import {optionSelect as stationOptionSelect} from '@/api/business/station'
import {storageBatchStore} from '@/api/system/storage'
import useAppStore from '@/store/modules/app'
import {ComponentInternalInstance} from 'vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { EnableStatusEnum } = toRefs<any>(proxy?.useEnum('enable_status_enum'))

const { t } = useI18n()
const appStore = useAppStore()
const emits = defineEmits(['success'])

const formRef = ref<FormInstance>()

const stationOptions = ref<any[]>([])
const priceOptions = ref<any[]>([])

const state = reactive({
  update: false,
  visible: false,
  loading: false,
  title: t('system.chargerStorage.action.store'),
})

const form = ref<any>({
  id: undefined,
  stationId: '',
  priceId: '',
  ids: [],
  status: 'Enabled',
  note: '',
})

const rules = reactive<FormRules>({
  stationId: [{ required: true, message: t('system.chargerStorage.store.validator.stationId'), trigger: 'blur' }],
  priceId: [{ required: true, message: t('system.chargerStorage.store.validator.priceId'), trigger: 'blur' }],
  status: [{ required: true, message: t('system.chargerStorage.store.validator.status'), trigger: 'blur' }],
})

const openDialog = (ids:[]) => {
  form.value.ids = ids
  state.visible = true
}

const handleClose = () => {
  state.visible = false
}

const getDict = () => {
  stationOptionSelect({}).then((res) => {
    stationOptions.value = res.data || []
  })

  priceOptionSelect().then((res) => {
    priceOptions.value = res.data || []
  })
}
getDict()

const handleSubmit = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      state.loading = true
      storageBatchStore(form.value).then(()=>{
        ElMessage.success(t('operate.tooltip.success'))
        handleClose()
        emits('success')
      }).finally(()=>{
        state.loading = false
      })
    }
  })
}

const beforeClose = (done: () => void) => {
  done()
}
defineExpose({
  openDialog,
})
</script>
